<template>
	<div>

		<nav class="swiper">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide food_types_container">
						<img src="../../images/banner1.jpeg">
					</div>
          <div class="swiper-slide food_types_container">
						<img src="../../images/banner3.jpeg">
					</div>
          <div class="swiper-slide food_types_container">
						<img src="../../images/banner4.jpeg">
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</nav>
		<div class="chart-wrapper">
			<canvas id="mountNode"></canvas>
		</div>


		<foot-guide></foot-guide>
	</div>
</template>

<script>
	import footGuide from 'src/components/footer/footGuide'
	import 'src/plugins/swiper.min.js'
	import 'src/style/swiper.min.css'
	import {
		getStore,
		setStoreSession,
		getStoreSession
	} from '../../config/mUtils'
	import {
		InfiniteScroll,
		Toast,
		Lazyload
	} from 'mint-ui';

	export default {
		data() {
			return {
				bannerlist: [{
						bannerImg: 'static/img/banner1.jpeg'
					},
					{
							bannerImg: 'static/img/banner3.jpeg'
					},
					{
							bannerImg: 'static/img/banner4.jpeg'
					},
				]

			}
		},
		components: {
			footGuide
		},
		computed: {},
		methods: {
			allMeterValue(){//全国整体情况
      const instance = this.$axios.create({
        baseURL: 'http://47.103.102.210:9081/',
      })
				instance.get('gdiot/stat/selectDataV1').then((p) => {
					this.initChart(p.data[0]);
				})
			},
			initChart(obj) {
				var data = [{
						year: '正常电表',
						sales:parseInt(obj.meterOnline),//必须要数字类型

					}, {
						year: '预警电表',
						sales:parseInt(obj.meterWarning)

					}, {
						year: '离线电表',
						sales: parseInt(obj.meterOffline)
					}
					// ,
					// {
					// 	year: '用电总量',
					// 	sales:  parseInt(obj.offlineNum)
					// }
				];
				var chart = new F2.Chart({
					id: 'mountNode',
					pixelRatio: window.devicePixelRatio
				});

				chart.source(data, {
					sales: {
						tickCount: 5
					}
				});
				chart.tooltip({
					showItemMarker: false,
					onShow: function onShow(ev) {
						var items = ev.items;
						items[0].name = null;
						items[0].name = items[0].title;
						items[0].value = items[0].value;
					}
				});
				chart.interval().position('year*sales').color('year');;
				chart.render();
			}

		},
		created() {


		},
		mounted() {
			// document.getElementById('mountNode').widrh=window.innerWidth
			this.allMeterValue();

			new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				loop: true,
				autoplay: 4000
			});
			// console.log(getStoreSession('userInfo'))


		},
	}
</script>
<style lang="scss">
	@import 'src/style/mixin';

	canvas {
		display: block;
		width: 100vw;
		height: 69.33333333vw;
	}

	@media all and (orientation: landscape) {
		canvas {
			display: block;
			width: 100vw;
			height: 48.12593703vw;
		}

		.header {
			padding: 2.3988006vw;
			font-size: 2.3988006vw;
			line-height: 3.37331334vw;
		}

		.icon {
			display: inline-block;
			width: 2.3988006vw;
			height: 2.3988006vw;
			background-image: url(https://gw.alipayobjects.com/zos/rmsportal/oLOjjJWHatTpgfygoLbE.png);
			background-size: cover;
			vertical-align: -1px;
			margin-right: 3.74812594vw;
			position: relative;
		}

		.icon:after {
			content: '';
			position: absolute;
			top: 1px;
			right: -12px;
			width: 1px;
			height: 2.3988006vw;
			background-color: #979797;
		}
	}

	.swiper-slide {
		text-align: center;
		img {
			// max-width: 100%;
			width: 100%;
			height: 8.69rem;
			animation: show-car .5s;
			transition: left .6s, top .6s;
			transition-delay: 1s;
		}
	}



	.cssActive {
		color: #FB5D57 !important;
	}

	@keyframes show-car {
		0% {
			transform: scale(.3);
		}
		100% {
			transform: scale(1);
		}

	}
</style>
